<template>
  <div class="mobile-login" :style="loginMainStyle">
    <img :src="logo" alt="logo" class="login-icon" />
    <h2 v-if="titleDisplay" class="system-title" :style="setFontStyle(titleSettingColor)">
      {{ titleSettingText }}
    </h2>
    <h2 v-if="loginTitleSettingsType === 'text'" class="login-title" :style="setFontStyle(loginTitleSettingsColor)">
      {{ loginTitleSettingsText }}
    </h2>
    <img
        v-else-if="mobileLoginTitle"
        class="login-title"
        style="width: 90%; height: 30px"
        :src="mobileLoginTitle"
        alt="loginTitleImage"
    />
    <view class="login-form">
      <u-form :model="formData" ref="loginForm">
        <view class="login-form-item">
          <u-form-item
              label="手机"
              label-width="40"
              :left-icon="mobilePhone"
              :left-icon-style="leftIconStyle"
              prop="username"
          >
            <u-input v-model="formData.username" height="50" placeholder="请输入手机号" />
          </u-form-item>
        </view>
        <view class="login-form-item">
          <u-form-item
              label="密码"
              label-width="40"
              :left-icon="mobilePassword"
              :left-icon-style="leftIconStyle"
              prop="password"
          >
            <u-input v-model="formData.password" type="password" height="50" placeholder="请输入登录密码" />
          </u-form-item>
        </view>
        <view class="login-form-item">
          <u-form-item
              label="验证码"
              label-width="40"
              :left-icon="mobileVerificationCode"
              :left-icon-style="leftIconStyle"
              prop="captcha"
          >
            <u-input v-model="formData.captcha" center clearable height="50" placeholder="请输入验证码" />
            <template #right>
              <img class="captcha-style" @click="updateCaptcha" :src="captchaImg" alt="" />
            </template>
          </u-form-item>
        </view>
        <view style="margin: 16px 0">
          <u-button round block type="primary" @click="onLogin"> 登录 </u-button>
        </view>
      </u-form>
    </view>
    <footer class="login-footer" :style="setFontStyle(footerSettingColor)"> {{ footerSettingText }} </footer>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, ref, computed } from 'vue'
import { fetchCaptcha, fetchSystemInfo } from '@/apis/sys/user'
import { useUserStore } from '@/store/modules/user'
import logo from '@/static/images/logo.png'
import mobileLoginBg from '@/static/images/login.png'
import mobileLoginTitle from '@/static/images/loginTitle.png'
import mobilePhone from '@/static/images/mobile-phone.png'
import mobilePassword from '@/static/images/mobile-password.png'
import mobileVerificationCode from '@/static/images/mobile-verification-code.png'
import * as mobileLoginConfiguration from './LoginPageConfig'
import md5 from 'js-md5'
import { onPullDownRefresh } from '@dcloudio/uni-app'
// #ifdef MP-WEIXIN || MP-QQ
import { productBase } from '@/config'
// #endif
import { apiHost } from '@/config'
import {handleRedirect, localSave} from '@/utils/common'

export default defineComponent({
  name: 'MobileLogin',
  setup() {
    const userStore = useUserStore()
    const captchaImg = ref('')
    const formData = reactive({
      username: '',
      password: '',
      captcha: '',
      key: ''
    })
    // 表单ref
    const loginForm = ref()
    const ruler = {
      username: [{ required: true, message: '请输入手机号', trigger: 'blur,change' }],
      password: [{ required: true, message: '请输入登录密码', trigger: 'blur,change' }],
      captcha: [{ required: true, message: '请输入验证码', trigger: 'blur,change' }]
    }
    const updateCaptcha = () => {
      fetchCaptcha().then(resp => {
        formData.key = resp.key
        captchaImg.value = resp.captcha
      })
    }
    const onLogin = () => {
      loginForm.value.validate(valid => {
        if (valid) {
          return userStore
              .login({
                password: md5(formData.password).toString(),
                username: formData.username,
                key: formData.key,
                captcha: formData.captcha
              })
            .then((resp) => {
              localSave('al__Access-Token', resp.token)
              localSave('al__UID', resp.uuid)
            })
              .then(() => switchToIndexTab())
        }
      })
    }

    onMounted(() => {
      // 设置校验
      loginForm.value.setRules(ruler)
      // 获取验证码
      updateCaptcha()
      // #ifdef H5
      let host = window.location.hostname
      if (host === 'localhost') {
        host = apiHost.split('://')[1]
      } else {
        host = host + (window.location.port === '' ? '' : ':' + window.location.port)
      }
      host = host + import.meta.env.VITE_PUBLIC_PATH + '/'
      // #endif
      // #ifdef MP-WEIXIN || MP-QQ
      const host = productBase
      // #endif
      fetchSystemInfo(host)
          .then(resp => resp.data)
          .then(resp => {
            const { id, tenantId } = resp
            userStore.tenantId = tenantId
            userStore.productId = id
            userStore.appid = import.meta.env.VITE_APP_ID || 'app_preview'

            localSave('al__APPID', userStore.appid)

            if (userStore.uuid && userStore.token) {
              switchToIndexTab()
            }
          })
    })

    onPullDownRefresh(() => {
      // 下拉刷新
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    })

    const switchToIndexTab = () => {
      handleRedirect('/pages/Page50001874/Page50001874')
    }

    const loginMainStyle = computed(() => {
      return {
        // #ifdef MP-WEIXIN || MP-QQ
        backgroundImage: `url(http://${productBase}${mobileLoginBg})`
        // #endif
        // #ifdef H5
        backgroundImage: `url(${mobileLoginBg})`
        // #endif
      }
    })
    const setFontStyle = color => {
      return { color }
    }
    const leftIconStyle = {
      width: '16px',
      height: '16px'
    }

    return {
      logo,
      loginForm,
      mobilePhone,
      mobilePassword,
      mobileVerificationCode,
      mobileLoginBg,
      captchaImg,
      formData,
      onLogin,
      setFontStyle,
      loginMainStyle,
      mobileLoginTitle,
      updateCaptcha,
      leftIconStyle,
      ...mobileLoginConfiguration
    }
  }
})
</script>
<style lang="less" scoped>
.mobile-login {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: absolute;

  .login-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 155px;
    left: 50%;
    transform: translateX(-50%);
  }

  .system-title {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #192842;
    position: absolute;
    top: 210px;
    text-align: center;
    width: 100%;
  }

  .login-title {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #42526e;
    position: absolute;
    top: 280px;
    left: 20px;
  }
  .captcha-style {
    width: 80px;
    height: 24px;
    display: block;
  }

  .login-form {
    position: absolute;
    top: 320px;
    left: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .login-form-item {
      background: #dfe4f0;
      border-radius: 20px;
      margin-bottom: 20px;
      padding: 8px 12px;
      overflow: visible;
      box-sizing: border-box;
      input {
        background: #dfe4f0;
        color: #42526e;
      }
      :deep(.u-form-item) {
        line-height: 1.6rem;
        padding: 0;
        .u-form-item--left__content__label {
          display: none;
        }
      }
    }
  }

  .login-footer {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
  }
}
</style>